import React from "react";
import { Bar } from "@ant-design/plots";
import { Icon, Tooltip } from "antd";

interface TitleType {
  title: string;
  prompt?: string;
}

type Props = {
  title: TitleType;
  data: Record<string, any>[];
  barConfig: {
    height?: number;
    xField: string;
    yField: string;
    seriesField?: string;
    color?: string;
    legend?: {
      position?: any;
    };
  };
};

const BarItem: React.FC<Props> = (props) => {
  const { barConfig, data, title } = props;

  const config = {
    data,
    ...barConfig,
  };

  return (
    <div className="bar-chart-item">
      <header className="bar-title">
        <Tooltip placement="topLeft" title={title.prompt}>
          <h1>
            {title.title}&nbsp;
            <Icon
              type="exclamation-circle"
              style={{ fontSize: "10px", position: "absolute" }}
            />
          </h1>
        </Tooltip>
      </header>
      <Bar {...config} />
      {/* <footer className="footer">
        <span>周同比{}</span>
        <span>日环比{}</span>
      </footer> */}
    </div>
  );
};

export default BarItem;
